import React from 'react'
import PropTypes from 'prop-types'
import { Modal, DatePicker, Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd'
import { ReportCode, SubmissionCode } from 'utils/seletLocalData'
import { converDate} from 'utils'
import moment from 'moment'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input
const AutoCompleteOption = AutoComplete.Option

class ReportBaseModal extends React.Component {
  render () {
    const { getFieldDecorator, validateFields, getFieldsValue } = this.props.form
    let { reportBase, modalProps } = this.props
    const { onOk } = modalProps
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    }

    const handleOk = () => {
      validateFields((errors) => {
        if (errors) {
          return
        }
        const data = {
          ...getFieldsValue(),
        }
        data.submissionDate = data.submissionDate.format('YYYY-MM-DD 12:00:00')
        onOk(data)
      })
    }
    const reportCodeOption = ReportCode.map(d => <Option key={d.key}>{d.value}</Option>)
    const submissionCodeOption = SubmissionCode.map(d => <Option key={d.key}>{d.value}</Option>)
    const dateFormat = 'DD/MM/YYYY';
    modalProps = { ...modalProps, onOk: handleOk }
    return (
      <Modal {...modalProps}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="Entity Reference"
            hasFeedback
          >
            {getFieldDecorator('reference', {
              initialValue: reportBase.reference,
              rules: [{
                max: 255, message: 'The max size is 255',
              }],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem label="Report Code" hasFeedback {...formItemLayout}>
            {getFieldDecorator('reportCode', {
              initialValue: reportBase.reportCode,
            })(<Select style={{ width: '100%' }}>{reportCodeOption}</Select>)}
          </FormItem>
          <FormItem label="Submission Code" hasFeedback {...formItemLayout}>
            {getFieldDecorator('submissionCode', {
              initialValue: reportBase.submissionCode,
            })(<Select style={{ width: '100%' }}>{submissionCodeOption}</Select>)}
          </FormItem>
          <FormItem {...formItemLayout} label="Submission Date" >
            {getFieldDecorator('submissionDate', {
              initialValue: reportBase.submissionDate&&moment(converDate(reportBase.submissionDate),dateFormat),
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <DatePicker style={{ width: '100%' }} format={dateFormat}/>
            )}
          </FormItem>
          <FormItem label="Reason">
            {getFieldDecorator('reason', {
              initialValue: reportBase.reason,
              rules: [
                {
                  max: 400, message: 'The max size is 400',
                },
              ],
            })(<TextArea style={{ width: '100%' }} rows={4} />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}

ReportBaseModal.propTypes = {
  reportBase: PropTypes.object,
  form: PropTypes.object,
  modalProps: PropTypes.object,
}

export default Form.create()(ReportBaseModal)
